<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>挂号详情</h1>
      </div>
      <br />
    </div>

    <div class="hzxx">
      <p>患者信息</p>
      <el-card class="box-card">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="患者姓名">
              <el-input
                v-model="thepatient.name"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件类型">
              <el-input
                v-model="thepatient.documentType"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="就诊人地址">
              <el-input
                v-model="thepatient.address"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="就诊卡号">
              <el-input
                v-model="thepatient.hospitalNumber"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="证件号码">
              <el-input
                v-model="thepatient.number"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码">
              <el-input
                v-model="thepatient.phone"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            disabled
            :model="formLabelAlign"
          >
            <el-form-item label="患者头像">
              <el-input
                v-model="thepatient.name"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="关系">
              <el-input
                v-model="thepatient.relation"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx">
      <p>预约信息</p>
      <el-card class="box-card" style="height:360px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊医院">
              <el-input
                v-model="campus.campusName"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="就诊医生">
              <el-input
                v-model="doctor.doctorName"
                style="width:250px;"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="门诊时间">
              <el-input
                v-model="waitingrecord.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="预约时间">
              <el-input
                v-model="appointment.createTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="取消时间">
              <el-input
                v-model="appointment.updateTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="医院地址">
              <el-input
                v-model="campus.campusAddress"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="医生职称">
              <el-input v-model="doctor.jobTitle" style="width:250px;" disabled>
              </el-input>
            </el-form-item>
            <el-form-item label="候诊时间">
              <el-input
                v-model="waitingrecord.houzhenTime"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="就诊状态">
              <el-input
                v-model="appointment.state"
                style="width:250px;"
                disabled
              ></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div class="hzxx_box2">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="就诊科室">
              <el-input
                v-model="divisiontype.divisionName"
                style="width:250px"
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="挂号类型">
              <el-input v-model="doctor.jobTitle" style="width:250px;" disabled>
              </el-input>
            </el-form-item>
            <el-form-item label="挂号费">
              <el-input
                v-model="doctor.registration"
                style="width:250pxs;"
                disabled
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>

    <div class="yyxx" v-if="appointment.state == '待就诊'">
      <p>病历信息</p>
      <el-card class="box-card" style="height:400px;">
        <div class="hzxx_box1">
          <el-form
            :label-position="labelPosition"
            label-width="96px"
            :model="formLabelAlign"
          >
            <el-form-item label="主要症状">
              <el-input style="width:250px;" v-model="symptoms"></el-input>
            </el-form-item>
            <el-form-item label="诊断结果">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="diagnosis"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="是否住院">
              <el-radio v-model="hospitalization" label="1">是</el-radio>
              <el-radio v-model="hospitalization" label="2">否</el-radio>
            </el-form-item>

            <el-form-item label="住院天数">
              <el-input-number
                v-model="Days"
                @change="handleChange"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <div class="hzxx_box2">
          <el-form :label-position="labelPosition" label-width="96px">
            <el-form-item label="选择药品">
              <el-select
                v-model="alldrugsList.id"
                placeholder="选择药品"
                @change="getByIddrugs"
              >
                <el-option
                  v-for="subject in alldrugsList"
                  :key="subject.id"
                  :label="subject.drugsName"
                  :value="subject.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="药品用量">
              <el-input-number
                v-model="useNumber"
                :min="1"
                :max="10"
              ></el-input-number>
            </el-form-item>
          </el-form>
        </div>
        <div class="anniu">
          <el-button type="primary" plain @click="baocun">保存</el-button>
          <el-button type="primary" plain @click="quxiao">确定</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: ""
      },
      appointment: [],
      thepatient: {},
      doctor: [],
      waitingrecord: [],
      divisiontype: [],
      campus: [],
      divisiontype: [],
      alldrugsList: [],
      drugs: [],
      diagnosis: "",
      symptoms: "",
      hospitalization: "1",
      Days: "1",
      useNumber: 1,
      formData: "",
      aaa: "",
      i:'',
    };
  },
  created() {
    //接收id
    this.id = localStorage.getItem("id");
    //    alert( this.id)
    //页面渲染之前执行，一般调用methods定义的方法
    this.getByIdappointment();
    this.getAlldrugs();
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    getByIdappointment() {
      this.$axios
        .get("/user/user/user/getByIdappointment/" + this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.appointment = res.data.data.id;
            this.thepatient = res.data.data.tp;
            this.doctor = res.data.data.d;
            this.waitingrecord = res.data.data.wr;
            this.divisiontype = res.data.data.dt;
            this.campus = res.data.data.c;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    quxiao() {
      this.$router.push("/guahao");
    },
    //药品全查
    getAlldrugs() {
      this.$axios
        .get("/user/user/user/getAlldrugs")
        .then(res => {
          if (res.data.code == 20000) {
            this.alldrugsList = res.data.data.list;
            console.log(this.alldrugsList);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //药品单查
    getByIddrugs(value) {
      // alert(value);
      this.$axios
        .get("/record/record/drug-record/getByIddrugs/" + value)
        //alert(this.id)
        .then(res => {
          if (res.data.code == 20000) {
            this.drugs = res.data.data.drugs;
            // console.log(this.drugs);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    baocun() {
      // this.updatethePatient();
      this.addmedicalRecords();
      // this.updateghState();
      // this.addinpatient();
      // this.adddrugRecord();
    },
    //添加病历
    addmedicalRecords() {
      this.$axios
        .post("/other/other/medical-records/addmedicalRecords", {
          patientId: this.thepatient.id,
          doctorId: this.doctor.id,
          campusId: this.campus.id,
          departmentId: this.divisiontype.id,
          symptoms: this.symptoms,
          diagnosis: this.diagnosis
        })
        .then(res => {
          if (res.data.code == 20000) {
            (this.symptoms = ""),
              (this.diagnosis = ""),
              //就诊人id
              this.$message.success(res.data.data.ok);
              this.updatethePatient();
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //添加药品
    adddrugRecord() {
      // console.log(this.alldrugsList.id)
      // console.log(this.thepatient.id)
      // console.log(this.useNumber)
      //console.log(this.drugs.drugsPrice)
      // console.log(this.divisiontype.id)
      alert(this.campus.id)
      alert(this.doctor.id)
      // alert(this.i)
      this.$axios
        .post("/record/record/drug-record/adddrugRecord", {
          drugId: this.alldrugsList.id,
          patientId: this.thepatient.id,
          useNumber: this.useNumber,
          drugsPrice: this.drugs.drugsPrice,
          outpatientId: this.divisiontype.id,
          doctorId: this.doctor.id,
          campusId:this.campus.id,
          hospitalMark:this.i,

        })
        .then(res => {
          if (res.data.code == 20000) {
            this.$message.success(res.data.data.ok);
            this.updateghState();
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //修改就诊人是否住院
    updatethePatient() {
      console.log(this.thepatient.id);
      console.log(this.hospitalization);
      console.log(this.Days);
      if (this.hospitalization == 1) {
        this.aaa = "是";
      } else {
        this.aaa = "否";
      }
      this.$axios
        .put("/user/user/the-patient/updatethePatient", {
          id: this.thepatient.id,
          hospitalization: this.aaa,
          days: this.Days
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.$message.success(res.data.data.ok);
            this.addinpatient();
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //修改体检状态
    updateghState() {
      console.log(this.appointment.id);
      this.$axios
        .post("/appointment/appointment/appointment/updateghState", {
          id: this.appointment.id
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.$message.success(res.data.data.ok);
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    //添加住院人表
    addinpatient() {
      if (this.hospitalization == 1) {
        this.aaa = "住院中";
      } else {
        this.aaa = "已出院";
      }
      this.$axios
        .post("/user/user/inpatient/addinpatient", {
          patientId: this.thepatient.id,
          departmentId: this.divisiontype.id,
          status: this.aaa,
          userId:this.Days
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.$message.success(res.data.data.ok);
            this.i=res.data.data.i;
            this.adddrugRecord();
          } else {
            this.$message.error(res.data.data.error);
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  height: 260px;
}
.hzxx {
  background-color: #e6e6e6;
}
.hzxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.hzxx_box1 {
  width: 300px;
  float: left;
}
.hzxx_box2 {
  float: left;
  margin-left: 100px;
}
.yyxx {
  background-color: #e6e6e6;
}
.yyxx p {
  width: 200px;
  margin-left: -40px;
  color: #4da6ff;
}
.anniu {
  width: 400px;
  height: 50px;
  margin-left: 100px;
  margin-top: 320px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
